//$(function () {
var ajaxData=[]
$.ajax({
  url: './json/urlObj.json',  // 相对路径是index.html 的相对路径
  data: {},
  type: "GET", 
  cache:false, 
  async:false,  // 设置为同步加载   默认是true：异步，false：同步。
  dataType: 'json',
  success: function(data) {
	      // alert(data.length)
		  ajaxData=data
   }
});	
	 

/**
 * 判断json文件路径
 * @param {Object} path
 */
function ajaxUrl(path){
	var url=''
	for (var k = 0; k < ajaxData.length; k++) {
	  if(path==ajaxData[k].current){
		  url=ajaxData[k].url
	  }
	}
    return url ;
}

/**
 *  获取emoji 总数量
 * @param {Object} path
 */
function reqJson(path){
	 var reqJsonData=0
	 var url=ajaxUrl(path)
	 $.ajax({
		  url: url, 
		  data: {},
		  type: "GET", 
		  cache:false, 
		  async:false,  // 设置为同步加载   默认是true：异步，false：同步。
		  dataType: 'json',
		  success: function(data) {
				reqJsonData=data
		   }
	 });	 
	 return reqJsonData 
}

var swiperImg = {
					container: $('.container')[0], 
					list: $('.list')[0],
					pointWrap: $('.point')[0]
				};
				
/**
 *  初始化内容
 */
function init() { 
    swiperImg.list.style.marginLeft = - (window.innerWidth) + 'px'
}; 
 

var state = {
				currentNum: 0,        // 当前列表数量
				prevNum: 0,           // 上一个列表数量
				nextNum: 0,           // 下一个列表数量
				groupSize: ajaxData.length,         // 表情包的组的个数
				groupIndex:0,         // 当前整个表情包的所在位置索引
				beginX: 0,            // 开始X轴 水平位置
				endX: 0,              // 结束X轴 水平位置
				nowX: 0,              // 当前X轴 水平位置
				index: 1 ,            // 当前轮播图的图片所在索引
				imgNum: 8,             // 大表情 每个轮播 item 能放emoji表情个数 
				lineNum: 4,            // 大表情 每行显示4个emoji
				qqGifImgNum: 20,       // qq 的每个轮播 item 能放emoji表情个数
				qqGifLineNum: 7        // qq 每行显示7个emoji
		   }

var initState =function(prevNum,currentNum,nextNum){
	state.prevNum = prevNum ;       // 上一个列表数量
	state.currentNum= currentNum ;     // 当前列表数量
	state.nextNum = nextNum ;       // 下一个列表数量
	state.beginX= 0 ;         // 开始X轴 水平位置
	state.endX= 0 ;           // 结束X轴 水平位置
	state.nowX= 0 ;           // 当前X轴 水平位置
}

var items=[]
var points=[]
var flag=0

//var container=$('.container')[0]
//var list=$('.list')[0]
//var pointWrap = $(".point")[0]
	
/**
 * 清空图片列表
 */
var listRemoveAllChild = function ()  { 
    while(swiperImg.list.hasChildNodes()){ 
       swiperImg.list.removeChild(swiperImg.list.firstChild); 
    } 
}

/** 
 * 清空分页小点列表
 */
var pointRemoveAllChild = function ()  { 
    while(swiperImg.pointWrap.hasChildNodes()){ 
       swiperImg.pointWrap.removeChild(swiperImg.pointWrap.firstChild); 
    } 
}

/**
 *
 * 创建item列表
 *
 * @param {Object} currentPath    当前列表的路径
 * @param {Object} suffix         图片格式后缀
 * @param {Object} prevPath       上一个列表的路径
 * @param {Object} nextPath       下一个列表的路径
 * @param {Object} st             激活小点索引
 */
var _createItem = function (prevPath, currentPath, nextPath, activeIndex ) {
	
	var prevData=reqJson(prevPath)
	if(prevPath!='' ){
		state.prevNum = prevData.length /state.imgNum + 2  // 上一个列表数量
		// alert(state.prevNum)
	} 
	
	var currentData=reqJson(currentPath)
	if(currentPath!='' ){
		// alert(state.groupIndex)
		if(state.groupIndex===0){
			state.currentNum=parseInt(currentData.length /state.qqGifImgNum) + 2
		}else{
			state.currentNum=parseInt(currentData.length /state.imgNum) + 2 // 当前列表数量
			// alert("当前一共的总表情数"+ state.groupIndex) 
		}
	}  
	
	var nextData=reqJson(nextPath)
	if(nextPath!='' ){
		state.nextNum=nextData.length /state.imgNum + 2  // 下一个列表数量
	}
	
    state.index= activeIndex ;
    items=[]
    var emojiList = $('#emojiList')
	var prevHtml=''; // 上一个
	var nextHtml= ''; // 下一个
	var currentHtml=''; // 当前
	
	for (var i = 0; i < state.currentNum; i++) {
	    if(i== 0){
	        if(prevPath ==''){
	        	prevHtml='<li class="item prev"><img src=""/></li>'; 
	        }else{
				var text=''
				if(state.groupIndex===1){
				$.each(prevData, function(q, item) {
					 // 分配到哪一个页面 最大索引 19
					var page = parseInt((prevData.length-1)/state.qqGifImgNum) ;  // 计算每个表情应该分配到哪一个页面,页面 从0页面开始,4表示每页显示多少个表情1
					  if( parseInt(q/state.qqGifImgNum)===page ){  // 当前的列表从 索引为1的页面开始显示，索引为0 是上一个轮播图的最后一个页面，需要让出位置
						  if(parseInt(q % state.qqGifLineNum)==0){  // 一行显示几个表情
							text +='<img src="'+ prevData[q].emoji + '"  style="font-size: 36px; width:36px; height: 36px; float:left;margin-left:10px;margin-top:10px;" class="qqemoji"/>'
						  }else{
							 text +='<img src="'+ prevData[q].emoji + '" style="font-size: 36px; width:36px; height: 36px; float:left;margin-left:10px;margin-top:10px;" class="qqemoji"/>'
						  }
					   }
				   });
				   text +='<img src="./img/tab/delete.png" style="font-size: 32px; width:32px; height: 32px; float:left;margin-left:15px;margin-top:10px;"/>'
			      }else{
					  $.each(prevData, function(q, item) {
					  	 // 分配到哪一个页面 最大索引 19
					  	var page = parseInt((prevData.length-1)/state.imgNum) ;  // 计算每个表情应该分配到哪一个页面,页面 从0页面开始,4表示每页显示多少个表情1
					  	  if( parseInt(q/state.imgNum)===page ){  // 当前的列表从 索引为1的页面开始显示，索引为0 是上一个轮播图的最后一个页面，需要让出位置
					  		 console.log(item.emoji)
					  		  if(parseInt(q % state.lineNum )==0){  // 一行显示几个表情
					  			text +='<img src="'+ prevData[q].emoji + '" style="font-size: 64px; width:64px; height: 64px; float:left;margin-left:10px;margin-top:10px;"  class="emoji-bigImg" />'
					  		  }else{
					  			 text +='<img src="'+ prevData[q].emoji + '" style="font-size: 64px; width:64px; height: 64px; float:left;margin-left:10px;margin-top:10px;" class="emoji-bigImg" />'
					  		  }
					  	   }
					   });
				}
				
				 prevHtml = '<li class="item prev" style="background-color: white;width: 100%; height: 100%;float:left;padding-left: 20px;">'+
						text + 
						'</li>'; 
	        	 // prevHtml='<li class="item prev"><img src="'+ prevPath + (state.prevNum-2) + prevPostfix + '"/></li>';
	        }
	    }else if(i>=1 && i<=state.currentNum-2){  // 长度减去3个 例如： 长度为7 这循环 7-3=4次 ，在加上前后两次 = 6
//			currentHtml += '<li class="item"><img src="'+ currentPath + i + currentPostfix + '"/></li>';	
			// if(i===1 && 0===state.groupIndex){
			var text='' 
			   if(state.groupIndex!=0){
				   $.each(currentData, function(n, item) {
				   	 // 分配到哪一个页面 最大索引 19
				   	var page = parseInt(n/state.imgNum) ;  // 计算每个表情应该分配到哪一个页面,页面 从0页面开始,4表示每页显示多少个表情
				   	  if( i === page + 1 ){  // 当前的列表从 索引为1的页面开始显示，索引为0 是上一个轮播图的最后一个页面，需要让出位置
				   		  if(parseInt(n  %  state.lineNum )==0){  // 一行显示几个表情
				   			text +='<img src="'+ currentData[n].emoji + '" style="font-size: 64px; width:64px; height: 64px; float:left;margin-left:10px;margin-top:10px;" class="emoji-bigImg" />'
				   		  }else{
				   			 text +='<img src="'+ currentData[n].emoji + '" style="font-size: 64px; width:64px; height: 64px; float:left;margin-left:10px;margin-top:10px;" class="emoji-bigImg" />'
				   		  }
				   	   }
					})
				   
				}else{
				  $.each(currentData, function(n, item) {
					  // 分配到哪一个页面 最大索引 20
					  var page = parseInt(n/state.qqGifImgNum) ;  // 计算每个表情应该分配到哪一个页面,页面 从0页面开始,4表示每页显示多少个表情
					  if( i == page +1 ){  // 当前的列表从 索引为1的页面开始显示，索引为0 是上一个轮播图的最后一个页面，需要让出位置
						  if(parseInt(n  %  state.qqGifLineNum )==0){  // 一行显示几个表情
							text +='<img src="'+ currentData[n].emoji + '" style="font-size: 36px; width:36px; height: 36px; float:left;margin-left:10px;margin-top:10px;"  class="qqemoji" />'
						  }else{
							 text +='<img src="'+ currentData[n].emoji + '" style="font-size: 36px; width:36px; height: 36px; float:left;margin-left:10px;margin-top:10px;" class="qqemoji" />'
						  }
					   }
				  }) 
					 text +='<img src="./img/tab/delete.png" style="font-size: 32px; width:32px; height: 32px; float:left;margin-left:15px;margin-top:10px;" class="delete"/>'
			    }
			  
			   currentHtml += '<li class="item" style="background-color: white;width: 100%; height: 100%;float:left;padding-left: 20px;">'+
						text + '</li>';
	    }else if(i===state.currentNum-1){
			
	   if(nextPath ==''){
	  //    nextHtml= '<li class="item next"><img src=""/></li>';
			nextHtml= '<li class="item next"></li>';
		}else{
			var nextUrl =ajaxUrl(nextPath)
			var text=''
			$.each(nextData, function(t, item) {
				 // 分配到哪一个页面 最大索引 19
				var page = parseInt(t/state.imgNum) ;  // 计算每个表情应该分配到哪一个页面,页面 从0页面开始,4表示每页显示多少个表情
				  if( page===0 ){  // 当前的列表从 索引为1的页面开始显示，索引为0 是上一个轮播图的最后一个页面，需要让出位置
					 console.log(item.emoji)
					  if(parseInt(t %  state.lineNum )==0){  // 一行显示几个表情
						text +='<img src="'+ nextData[t].emoji + '" style="font-size: 64px; width:64px; height: 64px; float:left;margin-left:10px;margin-top:10px;" class="emoji-bigImg" />'
					  }else{
						 text +='<img src="'+ nextData[t].emoji + '" style="font-size: 64px; width:64px; height: 64px; float:left;margin-left:10px;margin-top:10px;" class="emoji-bigImg" />'
					  }
				   }
			})
			nextHtml = '<li class="item next" style="background-color: white;width: 100%; height: 100%;float:left;padding-left: 30px;">'+
					text + '</li>'; 
		   } 
		}
     }
	  
	 var htmlStr = prevHtml + currentHtml + nextHtml ;
	 emojiList.append(htmlStr);
	  
	 //没有图片的情况,设置背景颜色
	if(state.groupIndex===0){
		 $(".prev").css({"background-color": "gray","height": "187.5px","border": 0,"opacity": 0});
	  // $(".next").css({"background-color": "gray","height": "187.5px","border": 0,"opacity": 0});
	}
    
	 items= $('.item')  // 赋值  必须在此调用  对每个item 设置适应屏幕大小
	 for (var i = 0; i < items.length ; i++) {
	   items[i].style.width = window.innerWidth + 'px'  // 设置每个item自适应 显示设备 的屏幕宽度
	 }
	 
	 
	 deletes= $('.delete') 
	 // alert("删除："+deletes.length)
	 for (var f= 0; f < deletes.length; f++) {
		 //采用闭包可在循环中，每循环一次就执行匿名function方法,就更新上面的function
		 (function(num) {
			// alert(num)
			deletes[f].addEventListener('tap', function() {
				alert("删除:" + num);
			}, false)
		 })(f);
	 }
	 
	 var msg_text = document.getElementById("msg-text");
	 
	 var qqemojis= $('.qqemoji')
	 // alert("qqemoji："+qqemojis.length)
	 for (var s= 0; s < qqemojis.length; s++) {
	 		 //采用闭包可在循环中，每循环一次就执行匿名function方法,就更新上面的function
	 		 (function(num) {
	 			qqemojis[s].addEventListener('tap', function() {
					// alert(JSON.stringify(this.src))
					// console.log(JSON.stringify(this.src))
					addEmoji(num)
	 			}, false)
	 		 })(s);
	 }
	 
	  // 拼接QQ小表情和文字 混排
	 var addEmoji = function(em){
	 	// alert(currentData[em].alt)
		msg_text.value+=currentData[em].alt
	 }
	 
	 
	 
	 var emojiBigImgs= $('.emoji-bigImg')
	 // alert("emojiBigImgs："+emojiBigImgs.length)
	 for (var e= 0; e < emojiBigImgs.length; e++) {
	 		 //采用闭包可在循环中，每循环一次就执行匿名function方法,就更新上面的function
	 		 (function(num) {
	 			emojiBigImgs[e].addEventListener('tap', function() {
				var msg_text_val ='<img src="'+ currentData[num].emoji + '" style="width:50px; height: 50px; "  />'
	 			var msgList = document.getElementById("msgList");
				msgList.insertAdjacentHTML("beforeend", msg_text_val);
				}, false)
	 		 })(e);
	 }
	 
	 
	 // tab 切换背景选中的颜色
	 var controlItem=$(".mui-control-item")
	 for (var w = 0; w < controlItem.length; w++) {
		controlItem[w].classList='mui-control-item'
	 }
	 controlItem[state.groupIndex].classList="mui-control-item mui-active"; // 追加样式
	 
}

/**
 * 分页小点遍历显示
 * @param {Object} active 数字表示激活第几个小点
 */
var pointWrap = function (active) { 
		points=[]
	    pointRemoveAllChild()
	    // 移动端屏幕宽度兼容问题
		for (var i = 1; i < items.length-1 ; i++) {
//		    items[i].style.width=window.innerWidth + 'px'  	
    	 	var pointDom = document.createElement('li')
		    pointDom.classList.add('point-item')
		    if(i === active){
		        pointDom.classList.add("active")
		    }
		    points.push(pointDom)
		    swiperImg.pointWrap.appendChild(pointDom)
		}
}; 


/**
 * 根据index来切换active类名
 * index 激活的项 索引
 */
var _setIndex = function (index) {
    for (var i = 0; i < points.length; i++) {
        points[i].classList.remove('active')
    }
       points[index].classList.add('active')
}






/**
 * 计算起始位置
 */
var _slice = function () {
    var deltaX = state.nowX - state.beginX
    swiperImg.list.style.marginLeft = - (window.innerWidth * state.index) + deltaX + 'px'
}


/**
 * 重置
 */
var _reset = function(){
    // 需要一个过度让复位更自然
    swiperImg.list.style.transition = 'all .3s'
    // 你现在在第几张就要复位到第几张
    swiperImg.list.style.marginLeft = - (window.innerWidth * state.index) + 'px'
}

/**
 * 计算偏移量
 */
var _judgeMove = function(){
    var deltaX = state.endX - state.beginX
    if(deltaX >= window.innerWidth * 3 / 5){
        // console.log('上一张')
        if(state.groupIndex===0 && state.index===1){	
			 _reset()
			 return;
        }
        _goPrev()  
    }else if (deltaX <= -window.innerWidth * 3 / 5){
        // console.log('下一张' + state.currentNum )
        if(state.groupIndex===state.groupSize -1 && state.index===state.currentNum -2 ){
			 _reset()
			 return;
        }
        _goNext()
    } else{
        // console.log('不动')
        _reset()
    }
}

/**
 * 右划
 */
var _goPrev =function(){
    // 不在第一张
    if (state.index > 0){
        state.index --
        swiperImg.list.style.transition = 'all .3s'
        swiperImg.list.style.marginLeft = - (window.innerWidth * state.index) + 'px'
         
		 var currentTotal = 0
		 // 1、当在起始位置等待切换到上一个轮播图组时
         if(state.index === 0){   
			 // alert(state.groupIndex % state.groupSize=== 3)
	          swiperImg.list.style.transition='none'
		      listRemoveAllChild()
		      pointRemoveAllChild()
		 	  state.groupIndex--
		      $('#pageNum').html(state.groupIndex)
			   // alert(reqJson(douyin).length /state.imgNum + 2 )
		       // 取模 计算如何切换  该切换到哪一组
               // 当小点的索引切换到正数的第一个位置时，在向前划，会出现两种情况：
               // (1) 前面无可以切换的内容; (2) 前面有可以切换的内容
		       // 判断是 第几组轮播图   (1) 前面无可以切换的内容;
	     
				 for (var i = 0; i < ajaxData.length -1; i++) {
					 
				   if(state.groupIndex % state.groupSize === i){ // (2) 后面有可以切换的内容
				      // alert(ajaxData[i].current)
					  // currentTotal = reqJson(ajaxData[i].current).length / state.imgNum + 2  // 上一个列表数量
					  var currentTotal=0  // 初始化
					  
					  if(state.groupIndex===0){
					  	currentTotal=reqJson(ajaxData[i].current).length /state.qqGifImgNum + 2
					  }else{
					    currentTotal=reqJson(ajaxData[i].current).length /state.imgNum + 2 // 当前列表数量
					  }
					  
					  _createItem( ajaxData[i].prev, ajaxData[i].current , ajaxData[i].next,currentTotal -2 -1)
					}
				 }
		
			     items=[]
				 items=$(".item")
				
				 swiperImg.list.style.width = items.length * window.innerWidth + 'px' 
				 swiperImg.list.style.marginLeft = - (window.innerWidth * (currentTotal -2 )) + 'px'
				 state.index=items.length-2
				 pointWrap(state.index-1)
				 _setIndex(state.index-1)
		
			}else{   // 2、除了第一个起始位置的所有项
				swiperImg.list.style.marginLeft = - (window.innerWidth * (state.index)) + 'px'
				_setIndex(state.index-1)
			 }
         
    }else{
        // 复位
        _reset()
    }
}

/**
 * 左划
 */
var _goNext =function(){
    if (state.index < items.length - 1){
        state.index ++
        swiperImg.list.style.transition = 'all .3s'
        swiperImg.list.style.marginLeft = - (window.innerWidth * state.index) + 'px'

       // 1、当在最后位置等待切换到下一个轮播图组时
       if(state.index===items.length-1){
	       	swiperImg.list.style.transition='none'
		    listRemoveAllChild()
		    pointRemoveAllChild()
		    state.groupIndex ++
		    $('#pageNum').html(state.groupIndex)
		       // 取模 计算如何切换  该切换到哪一组
               // 当小点的索引切换到正数的最后一个位置时，在向后划，会出现两种情况：
               // (1) 后面无可以切换的内容; (2) 后面有可以切换的内容
		       // 判断是 第几组轮播图   (1) 后面无可以切换的内容;
			   // alert(state.groupIndex)
		   
		   for (var i = 1; i < ajaxData.length; i++) {
			   if(state.groupIndex % state.groupSize === i){ // (2) 后面有可以切换的内容
                    _createItem( ajaxData[i].prev, ajaxData[i].current, ajaxData[i].next,1)
			    }
		   }
		   
		   items=$(".item")
		   init();
		   pointWrap(1)
		   swiperImg.list.style.width = items.length * window.innerWidth + 'px' 
      }else{ // 2、除了最后一个结束位置的所有项 
       	 swiperImg.list.style.marginLeft = - (window.innerWidth * (state.index)) + 'px'
         _setIndex(state.index-1)
       }
    }else{
        // 复位
        _reset()
    }
}


/**
 * 开始触摸
 */
swiperImg.container.addEventListener("touchstart",function (e) {
	// 去除过度获得良好的跟手体验
	swiperImg.list.style.transition='none'
    // 开始的位置赋值
    state.beginX = e.targetTouches[0].clientX
    // console.log(e.targetTouches[0].clientX)
})
 
/**
 * 触摸移动
 */
swiperImg.container.addEventListener("touchmove",function (e) {
    // 计算位置偏移量
    state.nowX=e.changedTouches[0].clientX
    _slice()
})


/**
 * 取消触摸
 */
swiperImg.container.addEventListener("touchend",function (e) {
    // 结束的位置赋值
    state.endX=e.changedTouches[0].clientX
    _judgeMove()
})

function itemHtml(){
	var it=''
	// test.js 获取的ajax数据
	for (var i = 0; i < ajaxData.length; i++) {
				        // alert(ajaxData[i].url);
		 var html=''
						 
		 $.ajax({
		   url: ajaxData[i].url,  // 相对路径是index.html 的相对路径
		   data: {},
		   type: "GET", 
		   cache:false, 
		   async:false,  // 设置为同步加载   默认是true：异步，false：同步。
		   dataType: 'json',
		   success: function(result) {
			   
			   var start=""
			   if(state.groupIndex===0 && i===0){
				   start='<a class="mui-control-item mui-active">'
			   }else{
				  start='<a class="mui-control-item">'
			   }   
			  it+= start +
					'<img src="'+ result[0].emoji +'" id="id'+i+'" style="width: 32px; height: 32px;"/>'+
				  '</a>'; 
			}
		 });
	}
	$("#pop").html(it)
				  
	// var item=document.getElementsByClassName("mui-control-item")
	var item=$(".mui-control-item")
	// console.log(JSON.stringify(data))
	for (var u= 0; u < item.length; u++) {
						
	//采用闭包可在循环中，每循环一次就执行匿名function方法,就更新上面的function
	(function(num) {
		item[u].addEventListener('tap', function() {
			checkEmoji(ajaxData[num].prev,ajaxData[num].current,ajaxData[num].next ,num)
		}, false)
	})(u);
  }
}

// add 监听点击事件 8
document.getElementById('add').addEventListener("tap",function () { 
    // var idstr = this.id.substring(this.id.length -1, this.id.length)
    // checkEmoji("./img/douyin/","./img/ldw/","",idstr)
	mui.toast("add:待开发...")
});


// setting 监听点击事件
document.getElementById('setting').addEventListener("tap",function () { 
    // var idstr = this.id.substring(this.id.length -1, this.id.length)
    // checkEmoji("./img/douyin/","./img/ldw/","",idstr)
	mui.toast("setting:待开发...")
});


 /** 
  * 节点点击事件
  * @param {Object} prevPath
  * @param {Object} currentPath
  * @param {Object} nextPath
  * @param {Object} idstr
  */ 
function checkEmoji( prevPath, currentPath, nextPath, idstr){
	swiperImg.list.style.transition='none'
	 listRemoveAllChild()
	 pointRemoveAllChild()
	
	 state.groupIndex=Number(idstr) 
	 $('#pageNum').html(state.groupIndex)
	 _createItem(prevPath,currentPath,nextPath,1)
	 items=$(".item")
	 init();
	 pointWrap(1)
	 swiperImg.list.style.width = items.length * window.innerWidth + 'px'
}

 
// 初始化加载
var loadData = function(){
	    init();
		itemHtml()
		
	    _createItem(ajaxData[0].prev, ajaxData[0].current, ajaxData[0].next, 1 )
		$('#pageNum').html(state.groupIndex)
		$('#pageTotal').html(ajaxData.length)
		
		pointWrap(1) 
		swiperImg.list.style.width = items.length * window.innerWidth + 'px'  // 适应屏幕  总宽度
} 

// 调用初始化
loadData()
 
//});

